<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center invite_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub invite_fd0_0'>
				<view class='flex flex-wrap align-center invite_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  invite_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='invite_fd0_0_c1_c0'>分享app</text>
				</view>
				<view class='flex flex-wrap align-center invite_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
			<view class='flex flex-direction flex-wrap align-center invite_fd1_0'>
				<image class='invite_fd1_0_c0' mode="aspectFit"
					:src='userInfo.head_img ? userInfo.head_img : STATIC_URL+"96.png"'></image>
				<view class='flex-1 flex flex-wrap align-center invite_fd1_0_c1'>
					<text class='invite_fd1_0_c1_c0 flex-1'>{{userInfo.user_name || ''}}</text>
					<view v-if="identity_icon"
						class='flex flex-direction flex-wrap align-center justify-center invite_fd1_0_c1_c1'>
						<image class='invite_fd1_0_c1_c1_c0' mode="aspectFit" :src='identity_icon'></image>
					</view>
				</view>
				<!-- <image class='invite_fd1_0_c2' mode="aspectFit" :src='STATIC_URL+"138.png"'></image> -->
				<view class="invite_fd1_0_c2" v-if="shareData.url">
					<qrcode ref="qrcode" canvas-id="qrcode" :size="qrSize" :value="shareData.url" @complete="getQrCode"
						@click="resetQr"></qrcode>

				</view>
			</view>
		</view>
		<!---flex布局flex布局结束-->
		<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex invite_flex_2">
			<view class='flex flex-wrap align-center justify-center invite_fd2_0'
				@tap.stop="popupShow1679365874287=true">
				<button class='invite_fd2_0_c0'>一键分享</button>
			</view>
			<view @tap.stop="savePostImage" class='flex flex-wrap align-center justify-center'>
				<button class='invite_fd2_1_c0'>保存图片到相册</button>
			</view>
		</view>

		<benben-popup v-model="popupShow1679365874287" :mask="true" mode='bottom'>
			<!---分享到flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout invite_flex_3">
				<view class='flex align-center justify-between invite_fd3_0'>
					<view class='flex flex-wrap align-center invite_fd3_0_c0'>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='invite_fd3_0_c1_c0'>分享到</text>
					</view>
					<view class='flex flex-wrap align-center' @tap.stop="popupShow1679365874287=false">
						<image class='invite_fd3_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"26.png"'></image>
					</view>
				</view>
				<view class='flex align-center justify-between invite_fd3_1'>
					<view class='flex flex-direction align-center' @tap.stop="shareFriends">
						<image class='invite_fd3_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"165.png"'></image>
						<text class='invite_fd3_1_c0_c1'>微信好友</text>
					</view>
					<view class='flex flex-direction align-center' @tap.stop="shareFriendCircle">
						<image class='invite_fd3_1_c1_c0' mode="aspectFit" :src='STATIC_URL+"166.png"'></image>
						<text class='invite_fd3_1_c1_c1'>朋友圈</text>
					</view>
				</view>
			</view>
			<!---分享到flex布局结束-->
		</benben-popup>

		<!-- 生成海报  -->
		<l-painter ref="painter" :css="{ width: '750rpx', height: '1334rpx', backgroundImage: `url(${bgImg})` }"
			custom-style="position: fixed; top: 100%">
			<template v-if="isShowPost">
				<l-painter-view :css="postView">
					<l-painter-image :src="shareData.head_img"
						css="width: 140rpx;height: 140rpx;border-radius: 70rpx;margin:70rpx auto 0 auto;" />
					<l-painter-text :text="`${shareData.user_nickname}`" :css="TextCss" />
					<l-painter-qrcode :text="shareData.url" :css="qrCss" />
				</l-painter-view>
			</template>
		</l-painter>

	</view>
</template>
<script>
	import {
		mapGetters,
		mapState
	} from 'vuex'
	import qrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'; // 二维码生成器
	export default {
		components: {
			qrcode
		},

		data() {
			return {
				"popupShow1679365874287": false,
				bgImg: '/static/images/1.png',
				// 配置信息
				shareData: {
					head_img: '',
					back_img: '',
					user_nickname: '',
					qr_code: '',
					url: 'https://splat.niurenjianzhan.com/index/index/download',
				},
				//二维码大小
				qrSize: 190,

				// 海报相关
				isShowPost: false, // 是否显示海报
				postUrl: '',
				postView: {
					width: '620rpx',
					height: '816rpx',
					background: '#fff',
					position: 'relative',
					border: '0 solid #fff',
					borderRadius: '15rpx',
					margin: '287rpx 65rpx'
				},
				TextCss: {
					// 设置居中对齐
					textAlign: 'center',
					fontSize: '32rpx',
					fontFamily: 'PingFang SC',
					fontWeight: 700,
					lineHeight: '45rpx',
					color: '#333333',
					letterSpacing: '16rpx',
					display: 'block',
					width: '620rpx',
					margin: '30rpx 0rpx 60rpx 0rpx',
					lineClamp: 1,
				},
				qrCss: {
					width: '350rpx',
					height: '350rpx',
					display: 'block',
					margin: '0rpx 135rpx 32rpx 135rpx',
					color: '#000',
					background: '#fff'
				},
			};
		},
		computed: {
			...mapGetters({
				themeColor: 'themeColor',
				userInfo: 'userInfo'
			}),
			identity_icon() {
				if (this.userInfo.user_type) {
					let icon = this.userInfo.user_type == 2 ? this.userInfo.teacher_icon : this.userInfo.study_icon;
					return icon
				} else {
					return ''
				}
			}
		},
		watch: {},
		onLoad(options) {
			this.qrSize = uni.upx2px(380);
			this.initData()

			// this.getShareFunc();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {

			// 初始化数据
			initData() {
				this.shareData = {
						head_img: this.userInfo.head_img,
						back_img: '',
						user_nickname: this.userInfo.user_nickname,
						qr_code: '',
						url: 'https://splat.niurenjianzhan.com/index/index/download',
					},
					this.$nextTick(() => {
						this.shareNow();
					});
			},

			//获取分享信息  无接口
			/* async getShareFunc() {
			  this.isShowPost = false;
			  try{
			    //请求方法
			    let res = await this.$api.post(global.apiUrls.post63dc7b53aa07d, {});
			    if (res.data.code != 1) {
			      this.$message.info(res.data.msg);
			      return;
			    }
			    console.log(this.shareData,'分享信息')
			    this.shareData = res.data.data && !Array.isArray(res.data.data) ? res.data.data : {};
			    this.$nextTick(() => {
			      this.isRequest = false;
			      this.shareNow();
			    });
			  }catch(e){
			    //TODO handle the exception
			    console.log('配置信息获取 错误捕获',e)
			    this.isRequest = false;
			  }
			  
			},
			*/

			//获取二维码
			getQrCode(e) {
				// 获取二维码
			},

			//重置二维码
			resetQr() {
				this.$refs.qrcode.remake();
			},

			//立即生成海报
			shareNow() {
				if (this.shareData.url) {
					this.isShowPost = true;
					this.$refs.painter.canvasToTempFilePathSync({
						fileType: 'jpg',
						// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
						pathType: 'url',
						quality: 1,
						success: res => {
							// console.log(res.tempFilePath);
							this.postUrl = res.tempFilePath;
						}
					});
				}
			},

			// 保存到相册
			savePostImage() {
				if (this.postUrl) {
					//#ifdef APP-PLUS
					// 非H5 保存到相册
					uni.saveImageToPhotosAlbum({
						filePath: this.postUrl,
						success: res => {
							console.log('save success');
							this.$message.info('保存成功!');
						},
						fail: err => {
							console.log(err);
						}
					});
					//#endif
					//#ifdef H5
					// H5 提示用户长按图另存

					//#endif
				} else {
					this.$message.info('保存失败,您也可以通过截屏获取!');
				}
			},

			//分享好友
			shareFriends() {
				this.popupShow1673249791652 = false;
				//#ifdef APP-PLUS
				this.$share.shareFriend({
						type: 0, //分享图文
						// title: this.shareData.share_title,
						imageUrl: SYSTEM_CONFIG.logo,
						href: this.shareData.url || ''
						// summary: this.shareData.share_des || ''
					},
					res => {
						console.log('回调返回', res);
					}
				);
				//#endif
				//#ifdef H5
				this.$message.error('H5 暂不支持分享!');
				//#endif
			},

			//朋友圈
			shareFriendCircle() {
				this.popupShow1673249791652 = false;
				//#ifdef APP-PLUS
				this.$share.shareFriendsCircle({
						type: 0, //分享图文
						// title: this.shareData.share_title,
						href: this.shareData.url || '',
						imageUrl: SYSTEM_CONFIG.logo,
						// summary: this.shareData.share_des || ''
					},
					res => {
						console.log('回调返回', res);
					}
				);
				//#endif
				//#ifdef H5
				this.$message.error('H5 暂不支持分享!');
				//#endif
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(212, 239, 238, 1);
		background-size: 100% auto !important;
	}

	.invite_flex_0 {
		border-bottom: 1px solid rgba(230, 230, 230, 1);
		background: rgba(212, 239, 238, 1);
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.invite_fd0_0_c2 {
		width: 50rpx;
	}

	.invite_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.invite_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.invite_fd0_0_c0 {
		width: 50rpx;
	}

	.invite_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.invite_fd1_0_c2 {
		width: 386rpx;
		height: 386rpx;
		border-radius: 0rpx;
		margin: 80rpx 0rpx 40rpx 0rpx;
	}

	.invite_fd1_0_c1_c1_c1 {
		position: absolute;
		color: #333;
		font-size: 22rpx;
		font-weight: 400;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		max-width: 80rpx;
	}

	.invite_fd1_0_c1_c1_c0 {
		width: 80rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.invite_fd1_0_c1_c1 {
		position: relative;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		width: 80rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin: 0rpx 0rpx 0rpx 7rpx;
	}

	.invite_fd1_0_c1_c0 {
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		// max-width: 200rpx;
		text-align: center;
	}

	.invite_fd1_0_c1 {
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.invite_fd1_0_c0 {
		width: 140rpx;
		height: 140rpx;
		border-radius: 70rpx 70rpx 70rpx 70rpx;
		margin: -70rpx 0rpx 0rpx 0rpx;
	}

	.invite_fd1_0 {
		border: 2px solid #BEE5E3;
		background: linear-gradient(180deg, #E9F7F6 0%, #FFFFFF 100%);
		margin: 152rpx 88rpx 0rpx 88rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.invite_flex_2 {
		width: 750rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(48rpx + var(--window-bottom));
	}

	.invite_fd2_1_c0 {
		background: #FFFFFF;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: rgba(62, 135, 182, 1);
		width: 686rpx;
		font-weight: 500;
		line-height: 88rpx;
	}

	.invite_fd2_0_c0 {
		background: #3E87B6;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 686rpx;
		line-height: 88rpx;
		font-weight: 500;
	}

	.invite_fd2_0 {
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.invite_flex_3 {
		background: rgba(212, 239, 238, 1);
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 40rpx 0rpx 48rpx 0rpx;
	}

	.invite_fd3_1_c1_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 16rpx 0rpx 0rpx 0rpx;
	}

	.invite_fd3_1_c1_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.invite_fd3_1_c0_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 16rpx 0rpx 0rpx 0rpx;
	}

	.invite_fd3_1_c0_c0 {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.invite_fd3_1 {
		margin: 40rpx 0rpx 0rpx 0rpx;
		padding: 0rpx 213rpx 0rpx 213rpx;
	}

	.invite_fd3_0_c2_c0 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.invite_fd3_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		line-height: 45rpx;
		margin: 0rpx 20rpx 0rpx 20rpx;
		color: #333;
	}

	.invite_fd3_0_c0 {
		width: 40rpx;
		height: 40rpx;
	}

	.invite_fd3_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>